import React, { Component } from 'react';
import { Text, View, ScrollView, StyleSheet } from 'react-native';
import { px2dp } from 'bee/utils/px2dp';
import { sizes, colors } from 'bee/themes';
import { PrimaryBtn } from 'bee/components/Buttons';
import { Attache } from 'bee/components/Attache';

export default class InsuranceAdvice extends Component<props> {
  static defaultProps = {
    serviceSpecialist: 'zhouzhou',
  };
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Attache />
        <Text style={styles.title}>人身保险投保提示书</Text>
        <View style={styles.contentViewBox}>
          <ScrollView
            showsVerticalScrollIndicator
            style={styles.scrollViewStyle}
          >
            <Text style={styles.content}>
              尊敬的客户：{'\n'}
              {'\n'}
              感谢您对中国人寿保险股份有限公司的信任与支持！我们将秉承“诚信为本，稳健经营”的企业宗旨和“造福社会大众，振兴民族寿险”的企业使命，竭诚为您服务。{
                '\n'
              }
              {'\n'}
              为帮助您充分了解本公司的保险产品，保护您的合法权益，本公司敬请您在投保人身保险时注意以下事项：{
                '\n'
              }
              {'\n'}
              一、请您确认保险机构和销售人员的合法资格{'\n'}
              {'\n'}
              本公司为依法取得中国保险监督管理委员会颁发《经营保险业务许可证》的保险机构，依法经营各类人身保险业务。您从本公司销售人员处购买保险时，请您关注销售人员是否持有本公司的《保险代理从业人员展（执）业证书》。{
                '\n'
              }
              {'\n'}
              二、请您根据实际保险需求和支付能力选择人身保险产品{'\n'}
              {'\n'}
              请您根据自身已有的保障水平和经济实力等实际情况，选择适合自身需求的保险产品。如果您选择的保险产品需要分期交纳保费，请充分考虑是否有足够、稳定的财力长期支付保险费，不按时交费可能会影响您的权益，建议您使用银行划账等非现金方式交纳保费。{
                '\n'
              }
              {'\n'}
              三、请您详细了解保险合同的条款内容{'\n'}
              {'\n'}
              销售人员的口头或书面解释、保险计划书和保险产品宣传资料等通常是对保险产品的简要介绍，其作用是帮助您理解您可能享受的保障利益，具体权益应以保险产品条款为准。请您要求销售人员向您提供相关保险产品的条款，并认真阅读。重点关注保险责任、责任免除、投保人及被保险人权利和义务、免赔额或免赔率的计算、申请赔款的手续、退保相关约定、费用扣除、产品期限、交费期限等内容。您若对条款内容有疑问，您可以要求销售人员进行解释。
            </Text>
          </ScrollView>
        </View>
        <View style={styles.buttonStyle}>
          <PrimaryBtn text="已阅读" onPress={() => {}} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  blank: {
    textAlign: 'center',
    lineHeight: px2dp(51),
    fontSize: px2dp(22),
    color: colors['1103'],
  },
  title: {
    textAlign: 'center',
    lineHeight: px2dp(80),
    backgroundColor: colors.white,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
    fontSize: sizes.f2,
    color: colors['1101'],
  },
  contentViewBox: {
    flex: 1,
    paddingVertical: px2dp(20),
    // paddingHorizontal: px2dp(40),
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
    // height: px2dp(900),
    backgroundColor: colors.white,
  },
  scrollViewStyle: {
    paddingHorizontal: px2dp(40),
    // height: px2dp(500),
    flex: 1,
  },
  content: {
    fontSize: sizes.f1,
    color: colors['1102'],
    lineHeight: px2dp(30),
  },
  buttonStyle: {
    marginTop: px2dp(52),
  },
});
